<template>
  <div>
    <el-divider content-position="left">门禁权限 - 已授权</el-divider>
    <div class="divider-role">
      <el-tag class="tag" type="success" v-for="item in tag" :key="item.id">{{ item.name }}</el-tag>
      <!-- <el-button type="primary" size="small">去授权</el-button> -->
    </div>
    <el-tree :data="accessControl" :props="defaultProps" :check-strictly="true" show-checkbox></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        parent: 'parentId',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'label',       // 标签显示
        children: 'children', // 子级
      },
      accessControl: this.$config.treeList,
      videoIntercom: this.$config.treeList,
      carpark: this.$config.treeList,

      tag: [
        {id: 1, name: '陈冠希'},
        {id: 2, name: '张柏芝'},
        {id: 3, name: '谢霆锋'}
      ]
    }
    

  }
}
</script>

<style lang="scss" scoped>
.divider-role {
  margin: 20px 0;
  .tag {
    margin: 0 10px;
  }
}
</style>
